<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{price}} -- {{vip}} -- {{svip}}</h1>
        <input type="text" v-model="price">
    </div>
</body>
<script>
    const { reactive, toRefs, watch } = Vue
    const app = Vue.createApp({
        setup (props, context) {
            const state = reactive({
                price: 100,
                vip: 0,
                svip: 0,
                name: '张一'
            })


            const { price, vip, svip, name } = toRefs(state)

            // 使用侦听器
            // watch(price, (currenValue, prevValue) => {
            //     // 这里是侦听器中的业务逻辑
            //     console.log(currenValue, prevValue);

            //     vip.value = currenValue * 0.8
            //     svip.value = currenValue * 0.5
            // })

            // 侦听器可以通过配置数组的方式来侦听多个属性
            // currenValue 在侦听多个属性时会是一个 最新的数组
            // prevValue 在侦听多个属性时会是一个 最新的数组
            // 侦听的属性只要有一个发生改变，那么后面的回调函数就会立即执行
            watch([price, name], (currenValue, prevValue) => {
                console.log(currenValue, prevValue);

            })

            return { price, vip, svip }
        },
    })
    app.mount('#app')
</script>

</html>